export const MeasureTool = () => {
  var draw = null
  const LineString = (map, type) => {
    /* 1,创建画布 */
    var source = new ol.source.Vector() //图层数据源
    var vector = new ol.layer.Vector({
      source,
    })
    map.addLayer(vector)
    /* 2,激活画笔 */
    draw = new ol.interaction.Draw({
      source: source, //测量绘制层数据源
      type: type, //几何图形类型
    })
    map.addInteraction(draw)
    /* 3,设置测量工具提示框 */
    var measureTooltipElement
    var measureTooltip
    function createMeasureTooltip() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement)
      }
      measureTooltipElement = document.createElement('div')
      measureTooltipElement.className = 'tooltip tooltip-measure'
      measureTooltip = new ol.Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
      })
      map.addOverlay(measureTooltip)
    }
    createMeasureTooltip() //创建测量工具提示框
    /* 4,绑定绘制开始事件,将测量值放到测量工具提示框显示 */
    var sketch
    var listener
    draw.on('drawstart', function (evt) {
      sketch = evt.feature //绘制的要素
      var tooltipCoord = evt.coordinate // 绘制的坐标
      listener = sketch.getGeometry().on('change', function (evt) {
        var geom = evt.target //绘制几何要素
        var output //定义变量接收长度值
        output = formatLength(/** @type {ol.geom.Polygon} */ (geom)) //面积值
        tooltipCoord = geom.getLastCoordinate() //坐标 //坐标
        measureTooltipElement.innerHTML = output //将测量值设置到测量工具提示框中显示
        measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
      })
    })
    /* 5,绑定绘制结束事件 */
    draw.on('drawend', function (evt) {
      // sketch = null //置空当前绘制的要素对象
      // measureTooltipElement = null //置空测量工具提示框对象
      // createMeasureTooltip() //重新创建一个测试工具提示框显示结果
      // ol.Observable.unByKey(listener)
    })
    /* 6,测量长度值输出 */
    var formatLength = function (line) {
      var length //定义长度
      var sphere = new ol.Sphere()
      var sourceProj = map.getView().getProjection() //地图数据源投影坐标系
      length = sphere.getLength(line, {
        projection: sourceProj,
        radius: 6378137,
      })
      var output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km' //换算成KM单位
      return output //返回线的长度
    }
  }
  const Area = (map, type) => {
    map.getLayers().getArray().splice(5, 1)
    map.getOverlays().clear()
    /* 1,创建画布 */
    var source = new ol.source.Vector() //图层数据源
    var vector = new ol.layer.Vector({
      source,
    })
    map.addLayer(vector)
    /* 2,激活画笔 */
    draw = new ol.interaction.Draw({
      source: source, //测量绘制层数据源
      type: type, //几何图形类型
    })
    map.addInteraction(draw)
    /* 3,设置测量工具提示框 */
    var measureTooltipElement
    var measureTooltip
    function createMeasureTooltip() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement)
      }
      measureTooltipElement = document.createElement('div')
      measureTooltipElement.className = 'tooltip tooltip-measure'
      measureTooltip = new ol.Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
      })
      map.addOverlay(measureTooltip)
    }
    createMeasureTooltip() //创建测量工具提示框
    /* 4,绑定绘制开始事件,将测量值放到测量工具提示框显示 */
    var sketch
    var listener
    draw.on('drawstart', function (evt) {
      sketch = evt.feature //绘制的要素
      var tooltipCoord = evt.coordinate // 绘制的坐标
      listener = sketch.getGeometry().on('change', function (evt) {
        var geom = evt.target //绘制几何要素
        var output //定义变量接收长度值
        output = formatArea(/** @type {ol.geom.Polygon} */ (geom)) //面积值
        tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
        measureTooltipElement.innerHTML = output //将测量值设置到测量工具提示框中显示
        measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
      })
    })
    /* 5,绑定绘制结束事件 */
    draw.on('drawend', function (evt) {
      sketch = null //置空当前绘制的要素对象
      measureTooltipElement = null //置空测量工具提示框对象
      createMeasureTooltip() //重新创建一个测试工具提示框显示结果
      ol.Observable.unByKey(listener)
    })
    /* 6,测量面积值输出 */
    var formatArea = function (polygon) {
      var area
      var sphere = new ol.Sphere()
      var sourceProj = map.getView().getProjection() //地图数据源投影坐标系
      var geom = /** @type {ol.geom.Polygon} */ (
        polygon.clone().transform(sourceProj, 'EPSG:4326')
      ) //将多边形要素坐标系投影为EPSG:4326
      area = Math.abs(
        sphere.getArea(geom, { projection: sourceProj, radius: 6378137 })
      ) //获取面积
      var output =
        Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>' //换算成KM单位

      return output //返回多边形的面积
    }
  }
}
export { draw, Area, LineString }
